<!--
 * @Description:
 * @Autor: zhangbing
 * @Date: 2021-07-27 16:50:57
 * @LastEditors: zhangbing
 * @LastEditTime: 2021-07-28 00:54:57
-->
<template>
  <div id="app">
    <my-header>星座物语</my-header>
    <nav-bar></nav-bar>
    <error-tip>></error-tip>
    <router-view v-slot="{Component}" v-if="!errorCode">
      <keep-alive>
        <component :is="Component"></component>
      </keep-alive>
    </router-view>
    <tab />
  </div>
</template>

<script>
  import MyHeader from '@/components/Header';
  import Tab from '@/components/Tab'
  import NavBar from '@/components/NavBar'
  import ErrorTip from '@/components/ErrorTip'

  import { useStore } from 'vuex'
  import { watch, computed } from 'vue'
  import { useRouter } from 'vue-router'

  export default {
    name: 'App',
    components: {
      MyHeader,
      Tab,
      NavBar,
      ErrorTip
    },
    setup() {
      const store = useStore()
      const state = store.state
      const router = useRouter()

      router.push('/')
      store.commit("setField", 'today')


      watch(() => {
        console.log(router);
        return router.currentRoute.value.name
      }, (value) => {
        store.commit("setField", value)
      })

      return {
        errorCode: computed(() => state.errorCode)
      }

    }
  }
</script>

